<template>
    <div class="warrper">
        <div class="tbar">
            <div>
                <span class="demonstration">时间区间</span>
                <el-date-picker
                v-model="dataArea"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions2">
                </el-date-picker>
            </div>
            
            <div class="inputs">
                <el-autocomplete
                class="inline-input"
                v-model="keyword"
                :fetch-suggestions="querySearch"
                placeholder="请输入姓名或手机号"
                :trigger-on-focus="false"
                @select="handleSelect"
                ></el-autocomplete>
            </div>
            
            <div class="serch">
                <el-button type="primary" icon="el-icon-search" @click="serch">搜索</el-button>
            </div>
            
        </div>
        <div id="myChart" class = "myChart" :style="{ height: '420px', width: '80%',}"></div>
        <div class="tables">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                min-height="300">
                <el-table-column
                fixed
                prop="date"
                label="点单时间"
                min-width="150">
                </el-table-column>
                <el-table-column
                prop="take_code"
                label="取餐单号"
                min-width="100">
                </el-table-column>
                <el-table-column
                prop="good_name"
                label="点单内容"
                min-width="120">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="客户姓名"
                  min-width="100">
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="手机号"
                  min-width="100">
                </el-table-column>                                 
                <el-table-column
                  prop="head_img"
                  label="头像"
                  min-width="80">
                  <template slot-scope="scope">
                      <img  :src="scope.row.head_img" alt="" style="width: 50px;height: 50px">
                  </template>
                </el-table-column>
                <el-table-column
                  prop="photo"
                  label="机器人抓取头像"
                  min-width="100">
                  <template slot-scope="scope">
                      <img  :src="scope.row.photo" alt="" style="width: 50px;height: 50px">
                  </template>
                </el-table-column>               
                <el-table-column
                  prop="remark"
                  label="备注"
                  min-width="120">
                </el-table-column>
            </el-table>
            <div class="current">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
import { MessageBox } from "mint-ui";
import utils from "@/utils/utils";
import Vue from 'vue'
import { DatePicker, Input ,Autocomplete, Button, Table, TableColumn, Pagination} from 'element-ui'
Vue.use(DatePicker)
Vue.use(Input)
Vue.use(Button)
Vue.use(Autocomplete)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
export default {
    data(){
        return {
          pickerOptions2: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          dataArea: '',  //获取选中时间
          startTime: '', //开始时间
          endTime: '',  //结束时间
          restaurants: [],
          keyword: '', //输入内容

          tableData: [],

          currentPage: 1,
          pageSize: 10,
          total: 0,

          myChart: '',
        }
    },
    methods:{
        serch(){
            // if(!this.dataArea){
            //     console.log(this.state)
            // }else if(this.dataArea&&this.state){
            //     this.startTime = this.dataArea[0].getTime()
            //     this.endTime = this.dataArea[1].getTime()
            //     console.log(this.startTime)
            //     console.log(this.endTime)
            //     console.log(this.state)
            // }else{
            //     this.startTime = this.dataArea[0].getTime()
            //     this.endTime = this.dataArea[1].getTime()
            //     console.log(this.startTime)
            //     console.log(this.endTime)
            // }
          if(this.dataArea) {
            this.startTime = utils.getTime(new Date(this.dataArea[0]));
            this.endTime = utils.getTime(new Date(this.dataArea[1]));
          }
          this.loadData();
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
      loadData() {
        const _this = this;
        request
            .get(' http://robot.ttrsznkj.com/yq-api/robot/logic/countGoods', {
              startTime: _this.startTime,
              endTime: _this.endTime,
              keyword: _this.keyword,
              offset: _this.currentPage * _this.pageSize - _this.pageSize,
              size: _this.pageSize 
            })
            .then(response => {
                if(response.code === 0) {
                  _this.total = response.data.total;
                  if(response.data.list && response.data.list.length > 0) {
                    _this.tableData = response.data.list.map(item => {
                      item.date = utils.getFullTime(item.create_time);
                      return item;
                    })
                  } else {
                    _this.tableData = [];
                  }
                  _this.drawLine(response.pile);
                } else {
                  MessageBox.alert("无法获取数据", "提示");
                }
            });        
      },
      handleSelect(item) {
        console.log(item);
      },

      //表单
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      
      //分页
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
        this.loadData();
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.loadData();
      },

      //绘制图标
      drawLine(data){
        let d1 = [];
        let d2 = [];
        data.forEach(item => {
          d1.push(item.name);
          d2.push(item.total);
        })
        // 绘制图表
        this.myChart.setOption({
            title: { text: '' },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
             grid: {
                top: '5%',
                left: '3%',
                right: '4%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                // max: 20,
                min: 0,
                axisLine: {show: false},
                axisLabel: {show: false},
                axisTick: {show: false},
                splitLine: {show:false}
            },
            yAxis: {
                data: d1
            },
            series: [{
              name: '销量',
              type: 'bar',
              label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                      color: 'red'
                    }
                }
              },
              data: d2
            }]
        });
      }
    },
    mounted() {
      this.myChart = this.$echarts.init(document.getElementById('myChart'));
      this.loadData();
    }
}
</script>
<style lang = "stylus" scoped>
     .warrper{
        padding-bottom 2rem
     }
     .tbar{
         width 100%
         height 100px
         line-height 100px
         display flex
         /* flex-direction column */
         flex-wrap nowrap
         justify-content center
     }
     .serch{
         margin-left  .3rem
     }
     .inputs{
        margin-left  .3rem
     }
     .tables{
        padding 0 1rem
     }
     .current{
        width 100%
        margin 0 auto
        text-align center
     }
     .myChart{
         width 800px
         /* margin 0 auto */
         padding 0 1rem
     }
     .demonstration{
        font-size .2rem
        padding-right .1rem
     }
</style>

